<!DOCTYPE HEML PUBLIC>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      html,
      body {
        width: 100vw;
        height: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        overflow-x: hidden;
      }

      div {
        margin: 0;
        padding: 0;
        border: 0;
      }

      .nav {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 27px;
        background-color: white;
        color: black;
        text-align: center;
        line-height: 25px;
      }

      a {
        color: black;
        text-decoration: none;
        border-bottom: 1px dashed black;
      }

      a:hover {
        border-bottom: 1px solid red;
      }

      .previous {
        float: left;
        margin-left: 10px;
      }

      .next {
        float: right;
        margin-right: 10px;
      }

      .green {
        color: green;
      }

      .red {
        color: red;
      }

      textarea {
        width: 100%;
        height: 100%;
        border: 0;
        padding: 0;
        margin: 0;
        padding-bottom: 20px;
      }

      .block-outer {
        float: left;
        width: 22%;
        height: 100%;
        padding: 5px;
        border-left: 1px solid black;
        margin: 30px 3px 3px 3px;
      }

      .block-inner {
        height: 68%;
      }

      .one {
        border: 0;
      }
      #c {
        height: 100%;
      }
    </style>
    <link rel="stylesheet" href="./css/splitting.css" />
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body>
    <!-- <audio src="./happy.mp3" autoplay loop></audio> -->
    <iframe allow="autoplay" style="display: none" src="./happy.mp3"></iframe>
    <canvas id="c" style="width: 100vw; height: 100vw"> </canvas>

    <!-- 数字时钟 -->
    <div class="clock">
      <span class="cog hours tens" data-splitting>0123456789</span>
      <span class="cog hours" data-splitting>0123456789</span>
      <span class="colon">:</span>
      <span class="cog minutes tens" data-splitting>0123456789</span>
      <span class="cog minutes" data-splitting>0123456789</span>
      <span class="colon">:</span>
      <span class="cog seconds tens" data-splitting>0123456789</span>
      <span class="cog seconds" data-splitting>0123456789</span>
    </div>
    <script>
      var collapsed = true;
      function toggle() {
        var fs = top.document.getElementsByTagName("frameset")[0];
        var f = fs.getElementsByTagName("frame");
        if (collapsed) {
          fs.rows = "250px,*";
          fs.noResize = false;
          f[0].noResize = false;
          f[1].noResize = false;
        } else {
          fs.rows = "30px,*";
          fs.noResize = true;
          f[0].noResize = true;
          f[1].noResize = true;
        }
        collapsed = !collapsed;
      }
    </script>

    <script>
      var b = document.body;
      var c = document.getElementsByTagName("canvas")[0];
      var a = c.getContext("2d");
      document.body.clientWidth;
    </script>

    <script>
      M = Math;
      Q = M.random;
      J = [];
      U = 16;
      T = M.sin;
      E = M.sqrt;
      for (O = k = 0; (x = z = j = i = k < 200); )
        with ((M[k] = k ? c.cloneNode(0) : c)) {
          width = height = k ? 32 : (W = 446);
          with (getContext("2d"))
            if ((k > 10) | !k)
              for (
                font = "60px Impact", V = "rgba(";
                (I = i * U), (fillStyle = k ? (k == 13 ? V + "205,205,215,.15)" : V + (147 + I) + "," + (k % 2 ? 128 + I : 0) + "," + I + ",.5)") : "#cca"), i < 7;

              )
                beginPath(fill(arc(U - i / 3, 24 - i / 2, k == 13 ? 4 - i++ / 2 : 8 - i++, 0, M.PI * 2, 1)));
            else
              for (; (x = T(i)), (y = Q() * 2 - 1), (D = x * x + y * y), (B = E(D - x / 0.9 - 1.5 * y + 1)), (R = (67 * (B + 1) * (L = k / 9 + 0.8)) >> 1), i++ < W; )
                if (D < 1) beginPath((strokeStyle = V + R + "," + ((R + B * L) >> 0) + ",40,.1)")), moveTo(U + x * 8, U + y * 8), lineTo(U + x * U, U + y * U), stroke();

          for (y = H = k + E(k++) * 25, R = Q() * W; (P = 3), j < H; )
            J[O++] = [(x += T(R) * P + Q() * 6 - 3), (y += Q() * U - 8), (z += T(R - 11) * P + Q() * 6 - 3), ((j / H) * 20 + (((j += U) > H) & (Q() > 0.8) ? Q((P = 9)) * 4 : 0)) >> 1];
        }

      setInterval(function G(m, l) {
        A = T(D - 11);
        if (l) return (m[2] - l[2]) * A + (l[0] - m[0]) * T(D);
        a.clearRect(0, 0, W, W);
        J.sort(G);

        for (i = 0; (L = J[i++]); a.drawImage(M[L[3] + 1], (207 + L[0] * A + L[2] * T(D)) >> 0, L[1] >> 1)) {
          if (i == 2e3) a.fillText("    圣诞节快乐!", U, 345);

          if (!(i % 7)) a.drawImage(M[13], (157 * (i * i) + T(D * 5 + i * i) * 5) % W >> 0, (113 * i + (D * i) / 60) % (290 + i / 99) >> 0);
        }
        D += 0.02;
      }, 1);
    </script>
    <script src="./js/splitting.js"></script>
    <script src="./js/script.js"></script>
  </body>
</html>
